<template>
  <div class="score" >
    
    <Title :isNecessary="question.isNecessary" :no="no" :title="question.title"></Title>
    <div style="margin-top: 10px; margin-bottom: 10px">
      <el-rate v-model="score" :max="max" :disabled="isDisable" :show-score="true" style="font-size: 30px" @change="select"></el-rate>
    </div>
  </div>
</template>

<script>
import Title from './Title.vue'

export default {
  name:'Star',
  components: {
    Title,
  },
  data(){
   return {
     
   }
  },
  props: {
    isDisable: {
      type: Boolean,
      default: false,
    },
    question: {
      type: Object,
      default: {}
    },
    no: {
      type: Number,
      default: 0
    },
    score: {
      type: Number,
      default: 0
    },
    max: {
      type: Number,
      default: 5,
    }
    
  },
  emits: ['changeRadio'],
  methods: {
    select() {
      this.question.answer[0] = this.question.options[this.score].id
      this.$emit('changeRadio', this.question)
    },
  },
}
</script>

<style scoped src='assets/css/fillcss/star.css'>
  /* @import url('../css/star.css'); */
</style>
